<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/react.development.js"></script>
    <script src="lib/react-dom.development.js"></script>
    <script src="lib/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script type="text/babel">
    // ref 可以在React当中获取到真实DOM
    // 应用场景：1-与组件结合使用 2-与普通元素结合使用
    const root = ReactDOM.createRoot(document.querySelector('#root'))

    class App extends React.Component {
        ab = React.createRef()
        
        render() {
            console.log(this.ab)
            return (
                <>
                    <button onClick={() => {
                        this.ab.current.setState({
                            a: 100,
                            b: 200
                        })
                    }}>按钮</button>
                    <Child ref={this.ab} />
                </>

            )
        }
    }

    class Child extends React.Component {
        state = {
            a: 1,
            b: 2
        }

        render() {
            return (
                <>
                    <h1>{this.state.a}</h1>
                    <h1>{this.state.b}</h1>
                </>
            )
        }
    }




    root.render(<App />)
</script>

</html>